import React from 'react';
import { Form, Input, Select, Button, DatePicker, Card, Row, Col } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

export default function TenantStaffCreate() {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      // 格式化注册时间为字符串
      if (values.regTime && values.regTime.format) {
        values.regTime = values.regTime.format('YYYY-MM-DD HH:mm:ss');
      }
      // 生成唯一 key
      values.key = Date.now();
      navigate('/tenant/staff', { state: { newStaff: values } });
    } catch (e) {}
  };

  return (
    <div style={{ background: '#f5f7fa', minHeight: '100vh', padding: 32 }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', background: '#fff', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.04)', padding: 32, position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, borderBottom: '2px solid #eee', paddingBottom: 12 }}>
          <div style={{ width: 10, height: 24, background: '#4880ff', borderRadius: 2, marginRight: 12 }} />
          <span style={{ fontWeight: 700, fontSize: 22 }}>人员信息新增</span>
          <span style={{ position: 'absolute', right: 24, top: 32, fontSize: 28, cursor: 'pointer' }} onClick={() => navigate(-1)}>&#10005;</span>
        </div>
        <Form
          form={form}
          layout="vertical"
          style={{ marginBottom: 40 }}
        >
          <Card style={{ borderRadius: 12, marginBottom: 0, padding: 24 }} bodyStyle={{ padding: 0 }}>
            <Row gutter={32}>
              <Col span={12}>
                <Form.Item label="人员姓名" name="name" rules={[{ required: true, message: '请输入人员姓名' }]} required>
                  <Input placeholder="请输入人员姓名" />
                </Form.Item>
                <Form.Item label="联系方式" name="phone" rules={[{ required: true, message: '请输入联系方式' }]} required>
                  <Input placeholder="请输入联系方式" />
                </Form.Item>
                <Form.Item label="人员类型" name="type" rules={[{ required: true, message: '请选择人员类型' }]} required>
                  <Select placeholder="请选择人员类型">
                    <Option value="负责人">负责人</Option>
                    <Option value="普通员工">普通员工</Option>
                  </Select>
                </Form.Item>
                <Form.Item label="注册时间" name="regTime" rules={[{ required: true, message: '请选择注册时间' }]} required>
                  <DatePicker showTime style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="租户名称" name="tenant" rules={[{ required: true, message: '请输入租户名称' }]} required>
                  <Input placeholder="请输入租户名称" />
                </Form.Item>
                <Form.Item label="所属楼宇" name="building" rules={[{ required: true, message: '请选择所属楼宇' }]} required>
                  <Select placeholder="请选择所属楼宇">
                    <Option value="A1幢">A1幢</Option>
                    <Option value="C2幢">C2幢</Option>
                  </Select>
                </Form.Item>
                <Form.Item label="房间名称" name="room" rules={[{ required: true, message: '请输入房间名称' }]} required>
                  <Input placeholder="请输入房间名称" />
                </Form.Item>
              </Col>
            </Row>
          </Card>
        </Form>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <Button type="primary" style={{ width: 120, marginRight: 32 }} onClick={handleSave}>保存</Button>
          <Button style={{ width: 120 }} onClick={() => navigate(-1)}>取消</Button>
        </div>
      </div>
    </div>
  );
} 